<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  index.html===jsonp
  <!-- script有一个天然的特性：不会产生跨域
  script标签只能发送get请求
  jsonp:只能发get请求

  jsonp：需要前端和后端一起配合解决
  -->
  <script src="https://cdn.bootcdn.net/ajax/libs/axios/1.3.6/axios.js"></script>

  <!-- <script>
    // axios('http://127.0.0.1:2000').then(res => {
    //   console.log(res, 9999);
    // })
  </script> -->

  <!-- <script>
    function fn (res) {
      console.log(res, 222);
    }
  </script>
  <script src="http://127.0.0.1:2000?fn=fn"> </script> -->

  <!-- 上面是一进入就发送请求
当前：通过点击事件发送请求
-->
  <button id="btn">按钮</button>
  <script>
    function fn (res) {
      console.log(res, 222);
    }
  </script>
  <script>
    document.querySelector('#btn').addEventListener('click', () => {
      /*
      实现的原理：动态创建script标签
      */
      var script = document.createElement('script')
      script.src = 'http://127.0.0.1:2000?fn=fn'
      console.log(script);
      document.body.append(script)
    })
  </script>

</body>

</html>